<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script src="{{ asset('/js/jquery-2.2.3.min.js') }}"></script>
    <script src="{{ asset('/js/canvas2image.js') }}"></script>
    <script src="{{ asset('/js/html2canvas.min.js') }}"></script>
    <title>轨迹回放</title>
    <style>

    </style>
</head>
<body>
    {{--<div id="div1" style="color:red;padding:10px 10px;">--}}
        {{--<div>--}}
                {{--<span>--}}
                    {{--hello,my english name is is leation.--}}
                {{--</span>--}}
        {{--</div>--}}
        {{--<div id="img">--}}
            {{--<img style="width:500px;float:left;" src="/img/01.jpg" />--}}
            {{--<img style="width:500px;float:left;" src="/img/02.jpg" />--}}
        {{--</div>--}}
        {{--<div style="clear:both;"></div>--}}
        {{--<div>--}}
                {{--<span>--}}
                    {{--hello,my english name is is leation.--}}
                {{--</span>--}}
        {{--</div>--}}
        {{--<div style="clear:both;"></div>--}}
    {{--</div>--}}
    {{--<div style="position:fixed;bottom:30px;right:30px;">--}}
        {{--<input type="button" value="saveHtmlAsImage" id="saveAsImage" />--}}
        {{--<a href="" id="downloadImage" style="display:none;">确认</a>--}}
    {{--</div>--}}
    Hello!
    <div id="1111" class="" style="background-color: #abc;">
        计算机天堂测试html5页面截图.{{$abc}}
        <br>jsjtt.com.{{$bcd}}
    </div>
    <textArea id="textArea" col="20" rows="10" ></textArea>
    <input class="example1" type="button" value="button">
    生成界面如下：
    <script>
//        $(document).ready(function () {
//            $("#saveAsImage").click(function (e) {
//                saveHtml2Image("div1", 3);
//            });
//        });
//
//        function saveHtml2Image(objId, scale) {
//            document.body.scrollTop = 0;
//            var obj = $("#" + objId);
//            var width = obj.width();
//            var height = obj.height();
//            html2canvas(obj, {
//                width: width,
//                height: height,
//                background: "rgba(255,255,255,1)",
//                onrendered: function (canvas) {
//                    canvas.id = "mycanvas";
//                    var dataUrl = Canvas2Image.saveAsJPEG(canvas, parseInt(width * scale), parseInt(height * scale));
//                    var newImg = document.createElement("img");
//                    newImg.src =  dataUrl;
//                    document.body.appendChild(newImg);
//                    var totalSize = dataUrl.length / 1024 / 1024;
//                    if (totalSize > 1.3) {
//                        dataUrl = null;
//                        scale = scale - 0.1;
//                        saveHtml2Image(objId, scale);
//                    }
//                    else {
//                        $('#downloadImage').attr('href', dataUrl);
//                        $('#downloadImage').attr('download', 'test.jpg');
//                        $('#downloadImage')[0].click();
//                    }
//                }
//            });
//        }
$(document).ready( function(){
    $(".example1").on("click", function(event) {
        event.preventDefault();
        html2canvas($('#1111'), {
            allowTaint: true,
            taintTest: false,
            onrendered: function(canvas) {
                canvas.id = "mycanvas";
                //document.body.appendChild(canvas);
                //生成base64图片数据
                var dataUrl = canvas.toDataURL();
//                var newImg = document.createElement("img");
//                newImg.src =  dataUrl;
//                console.log(newImg);
//                document.body.appendChild(newImg);
                $.ajax({
                    type:"POST",
                    url:"{{url('/test5')}}",
                    data:{data:dataUrl},
                    headers:{"X-CSRF-TOKEN":"{{csrf_token()}}"},
                    dataType:"json",
                    success:function($data){

                    }
                });
            }
        });
    });

});
    </script>
</body>
</html>